<template>
  <div class="hello">
    <h2 align="center">泽优Word一键粘贴控件（WordPaster）for vue2-cli-quill</h2>
     <div>
        <quill-editor ref="edt"
        v-model="content"
        :options="editorOption"
        style="height:600px;"
        @ready="editorReady($event)"></quill-editor>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import '../../static/WordPaster/js/BlockEmbed'
import {WordPaster} from '../../static/WordPaster/js/w'
import {zyCapture} from '../../static/zyCapture/z'
import {zyOffice} from '../../static/zyOffice/js/z'
import '../../static/WordPaster/css/w.css'
import '../../static/layer-v3.1.1/layer/layer'
import '../../static/layer-v3.1.1/layer/theme/default/layer.css'
import $ from 'jquery'
export default {
  name: 'HelloWorld',
  components: {
    quillEditor
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      content: '',
      editorOption: {modules: {toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [{'header': 1}, {'header': 2}],
          [{'list': 'ordered'}, {'list': 'bullet'}],
          [{'script': 'sub'}, {'script': 'super'}],
          [{'indent': '-1'}, {'indent': '+1'}],
          [{'direction': 'rtl'}],
          [{'size': ['small', false, 'large', 'huge']}],
          [{'header': [1, 2, 3, 4, 5, 6, false]}],
          [{'color': []}, {'background': []}],
          [{'font': []}],
          [{'align': []}],
          ['clean', 'link', 'image', 'video'],
          ['zycapture'],
          ['wordpaster', 'importwordtoimg', 'netpaster', 'wordimport', 'excelimport', 'pptimport', 'pdfimport'],
          ['zyoffice', 'zywordexport', 'zyofficepdf']
        ],
        handlers: {
          wordpaster: function () {
            WordPaster.getInstance().Paste()
          },
          importwordtoimg: function () {
            WordPaster.getInstance().importWordToImg()
          },
          netpaster: function () {
            WordPaster.getInstance().UploadNetImg()
          },
          wordimport: function () {
            WordPaster.getInstance().importWord()
          },
          excelimport: function () {
            WordPaster.getInstance().importExcel()
          },
          pptimport: function () {
            WordPaster.getInstance().importPPT()
          },
          pdfimport: function () {
            WordPaster.getInstance().ImportPDF()
          },
          zycapture: function () {
            zyCapture.getInstance().Capture2()
          },
          zyoffice: function () {
            zyOffice.getInstance().api.openDoc()
          },
          zywordexport: function () {
            zyOffice.getInstance().api.exportWord()
          },
          zyofficepdf: function () {
            zyOffice.getInstance().api.openPdf()
          }
        }
      }}}
    }
  },
  mounted () {
  },
  methods: {
    editorReady (quill) {
      // 加载控件
      WordPaster.getInstance({
        // 上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
        PostUrl: 'http://localhost:8891/upload.aspx',
        License2: '',
        // 为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
        ImageUrl: 'http://localhost:8891{url}',
        // 设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
        FileFieldName: 'file',
        // 提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
        ImageMatch: ''
      })

      // zyoffice
      zyOffice.getInstance({
        word: 'http://localhost:13710/zyoffice/word/convert',
        wordExport: 'http://localhost:13710/zyoffice/word/export',
        pdf: 'http://localhost:13710/zyoffice/pdf/upload'
      })

      // zyCapture
      zyCapture.getInstance({
        config: {
          PostUrl: 'http://localhost:8891/upload.aspx',
          License2: '',
          FileFieldName: 'file',
          Fields: { uname: 'test' },
          ImageUrl: 'http://localhost:8891{url}'
        }
      })      
      
      WordPaster.getInstance().SetEditor(quill)
      zyCapture.getInstance().setEditor(quill)
      zyOffice.getInstance().SetEditor(quill)
      this.addButtons()
    },
    addButtons () {
      $('.ql-zycapture').append('<img title="截屏" width="16" height="16" src=""/>')
      $('.ql-wordpaster').append('<img title="Word一键粘贴" width="16" height="16" src=""/>')
      $('.ql-importwordtoimg').append('<img title="Word转图片" width="16" height="16" src=""/>')
      $('.ql-netpaster').append('<img title="网络图片一键上传" width="16" height="16" src=""/>')
      $('.ql-wordimport').append('<img title="导入Word文档" width="16" height="16" src=""/>')
      $('.ql-excelimport').append('<img title="导入Excel文档" width="16" height="16" src=""/>')
      $('.ql-pptimport').append('<img title="导入PPT文档" width="16" height="16" src=""/>')
      $('.ql-pdfimport').append('<img title="导入PDF文档" width="16" height="16" src=""/>')
      $('.ql-zyoffice').append('<img title="导入Word文档（docx格式）" width="16" height="16" src=""/>')
      $('.ql-zywordexport').append('<img title="导出Word文档（docx格式）" width="16" height="16" src=""/>')
      $('.ql-zyofficepdf').append('<img title="导入PDF文档" width="16" height="16" src=""/>')      
    },
    onEditorChange ({ editor, html, text }) {
      this.content = html
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
